<template>
  <div id="liveGift">
    <h1 class="con-right-title">
      直播间礼物配置
    </h1>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="addGift">
        新增
      </el-button>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        label="礼物名称"
        prop="name"
        min-width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column label="礼物主图" min-width="80" align="center">
        <template slot-scope="scope">
          <div class="img-inner-box">
            <el-image :src="scope.row.masterImg"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="integral"
        label="积分值"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" min-width="100" align="center">
        <template slot-scope="scope">
          <span
            class="tag-span"
            :class="scope.row.status ? 'Y' : 'N' | filterClass('goodEnabled')"
            >{{
              scope.row.status ? 'Y' : 'N' | filterName('goodEnabled')
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="250">
        <template slot-scope="scope">
          <template>
            <el-button
              v-if="scope.row.status"
              type="text"
              @click="handleGoodsDisable(scope.row)"
            >
              下架
            </el-button>
            <el-button v-else type="text" @click="handleGoodsEnable(scope.row)">
              上架
            </el-button>
          </template>
          <template>
            <el-button type="text" @click="editGift(scope.row, scope.$index)">
              编辑
            </el-button>
          </template>
          <template>
            <el-button type="text" @click="deleteGift(scope.row)">
              删除
            </el-button>
          </template>
          <template v-if="searchParams.pageNum !== 1 || scope.$index > 0">
            <el-button type="text" @click="handleGoodsMoveUp(scope.row)">
              上移
            </el-button>
          </template>
          <template
            v-if="isShowDownMove || scope.$index < tableData.length - 1"
          >
            <el-button type="text" @click="handleGoodsMoveDown(scope.row)">
              下移
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增弹窗 -->
    <edit-dialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import {
  getLiveGiftList,
  onOrShelves,
  upOrDownMove,
  deleteLiveGif,
  addLiveGiftList,
  editLiveGiftList
} from '@/api/appSetting/liveGift'
import editDialog from '@component/system/liveGift/editDialog' //新增/编辑弹窗

let initDialogData = {
  isShow: false, // 控制弹框显示
  type: 'add',
  index: '',
  formData: {
    name: '',
    masterImg: '',
    integral: null
  }
}
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      editDialogData: initDialogData,
      isShowDownMove: true,
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  components: {
    editDialog
  },
  mounted() {
    this.searchList()
  },
  methods: {
    // 初始查询列表
    searchList() {
      this.loading = true
      getLiveGiftList(this.searchParams, (response) => {
        this.loading = false
        this.tableData = response.rows
        this.total = response.total
        this.isShowDownMove =
          this.searchParams.pageNum !==
          Math.ceil(this.total / this.searchParams.pageSize)
      })
    },
    // 添加礼物
    addGift() {
      this.editDialogData = initDialogData
      this.editDialogData.isShow = true
    },
    // 编辑礼物
    editGift(row, index) {
      if (row.status) {
        this.$message({
          message: '上架的礼物不可以编辑',
          type: 'warning'
        })
        return
      }
      let formData = { ...row }
      this.editDialogData = {
        isShow: true, // 控制弹框显示
        type: 'edit',
        index,
        formData
      }
    },
    // 删除礼物
    deleteGift(row) {
      if (row.status) {
        this.$message({
          message: '上架的礼物不可以删除',
          type: 'warning'
        })
        return
      }
      this.$confirm('确定要在系统中永久删除礼物吗', '删除礼物', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteLiveGif({ id: row.id }, () => {
            if (this.tableData.length <= 1) {
              this.searchParams.pageNum -= 1
            }
            this.searchList()
          })
        })
        .catch(() => {})
    },
    // 上移方法
    handleGoodsMoveUp(row) {
      const { id } = row
      upOrDownMove({ id, moveStatus: true }, () => {
        this.searchList()
      })
    },
    // 下移方法
    handleGoodsMoveDown(row) {
      const { id } = row
      upOrDownMove({ id, moveStatus: false }, () => {
        this.searchList()
      })
    },
    //下架
    handleGoodsDisable(row) {
      const { id } = row
      onOrShelves({ id, status: false }, () => {
        this.searchList()
      })
    },
    // 上架
    handleGoodsEnable(row) {
      const { id } = row
      onOrShelves({ id, status: true }, () => {
        this.searchList()
      })
    },
    /* 新增、编辑 */
    refresh(data, type) {
      if (type === 'add') {
        addLiveGiftList(data, () => {
          this.searchParams.pageNum = 1
          this.searchList()
        })
      } else {
        editLiveGiftList(data, () => {
          this.searchList()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.img-inner-box {
  display: flex;
  justify-content: center;
  align-items: center;

  .el-image {
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
  }

  img {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
  }
}
</style>
